<template>
    <div class="area-content-pro">
        <div id="main_left_B"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
        data: Array   // 能源数据
    },
    data() {
        return {
            chartData: []
        };
    },
    watch: {
        data: {
            handler(newVal) {
                this.processData(newVal);
                this.$nextTick(() => {
                    this.area();
                });
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        // 数据处理方法
        processData(rawData) {
            let rawDatas = rawData

            // 提取所有日期并排序
            const dates = [...new Set(rawDatas.map(item => item.createTime))].sort();

            // 创建数据模板
            const dataTemplate = dates.reduce((acc, date) => ({
                ...acc,
                [date]: { 供水: 0, 供电: 0, 供气: 0 }
            }), {});

            // 填充实际数据
            const processedData = rawData.reduce((acc, item) => {
                acc[item.createTime][item.NAME] = item.pointValue;
                return acc;
            }, dataTemplate);

            // 转换为图表需要的格式
            this.chartData = dates.map(date => [
                date,
                processedData[date].供水,
                processedData[date].供电,
                processedData[date].供气
            ]);
            console.log(this.chartData);

        },
        area() {
            const chartDom = document.getElementById("main_left_B");
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: ["供水", "供电", "供气"], // 修改图例名称
                    top: "3%",
                    right: "3%",
                    textStyle: { color: "#fff" }
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.chartData.map(item => item[0]), // 提取日期
                    axisLine: { lineStyle: { color: "rgba(91, 124, 144, 1)" } },
                    axisLabel: { color: "#fff" }
                },
                yAxis: {
                    type: "value",
                    axisLine: { lineStyle: { color: "rgba(91, 124, 144, 1)" } },
                    axisLabel: { color: "#fff" },
                    splitLine: { show: false }
                },
                series: [
                    {
                        name: "供水",
                        type: "line",
                        smooth: true,
                        itemStyle: { color: "#24adf3" },
                        data: this.chartData.map(item => item[1]) // 供水数据
                    },
                    {
                        name: "供电",
                        type: "line",
                        smooth: true,
                        itemStyle: { color: "#249544" },
                        data: this.chartData.map(item => item[2]) // 供电数据
                    },
                    {
                        name: "供气",
                        type: "line",
                        smooth: true,
                        itemStyle: { color: "#fbc21d" },
                        data: this.chartData.map(item => item[3]) // 供气数据
                    }
                ]
            };

            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" scoped>
.area-content-pro {
    #main_left_B {
        width: 363px;
        height: 265px;
    }
}
</style>
